<template>
  <!-- 关注与取消关注 -->
  <van-button 
    type="default" 
    size="small" 
    round 
    v-if="is_followed"
    :loading="focusStatus"
    @click="onFocus">
    已关注
  </van-button>
  <van-button 
    type="info" 
    size="small" 
    round 
    :loading="focusStatus"
    icon="plus"
    v-else
    @click="onFocus">
    关注
  </van-button>
</template>

<script>
import {onBlurAurAPI,onFocusAurAPI} from '@/api'

export default {
  name: 'FocusOrBlur',
  //修改父组件通过v-model传过来的属性和方法
  model: {
    prop: 'is_followed',
    event: 'updateFollwed'
  },
  props: {
    /* value: {
      type: Boolean,
      required: true
    }, */
    is_followed: {
      type: Boolean,
      required: true
    },
    aurId: {
      type: [String,Number],
      required: true
    }
  },
  data(){
    return {
      focusStatus: false
    }
  },
  methods: {
    //关注与取消关注
  async onFocus(){
    //请求之前将关注状态置为true
    this.focusStatus = true
    try {
      if(this.is_followed){
        //取消关注操作
        await onBlurAurAPI(this.aurId)
      }
      else {
        //关注操作
        await onFocusAurAPI(this.aurId)
      }
      this.$emit('updateFollwed',!this.is_followed)
      this.$toast.success(!this.is_followed ? '关注成功' : '取消关注成功')
    } catch (error) {
        if(error.response.status === 400) {
          this.$toast('自己不能关注自己')
        }else {
          this.$toast('操作失败，请稍后重试！')
        }
    }
    //修改状态
    // this.is_followed = !this.is_followed
    this.focusStatus = false
  }
  }
}
</script>

<style>

</style>